<template>
	<view class="newCar-page" :style="'background-color:' + pageBackgroundColor + ';'">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">
				<text class="nav-title">{{Name}}</text>
			</block>
		</cu-custom>
		<addressSearchFixed :inputValue="search" ref="setAddres" @searchBtn='event_clickSearchBtn' :isShowAddress="false" :showSearchBtn="false">
		</addressSearchFixed>
		<view style="padding-top: 95rpx;background: #fff;">
			<u-dropdown menu-icon="arrow-down-fill" menu-icon-size='20' ref="uDropdown" @open="openDro">
				<u-dropdown-item :title="droTitle" :options="options1">
					<view class="li-view">
						<view class="li-view-top" :class="{seachlse:ccState == '9999'}" @click.stop="QBCXClick(carsVehicleModelConditionList.total.name)">
							<view class="li-view-top-left">{{carsVehicleModelConditionList.total.name}}</view>
							<view class="li-view-top-rig">{{carsVehicleModelConditionList.total.num}}条</view>
						</view>
						<view class="li-views" v-for="(item,index) in carsVehicleModelConditionList.data" :key="index">
							<view class="li-views-h">{{item.key}}</view>
							<view class="li-views-s" :class="{seachlse:ccState == items.id}" v-for="(items,indexs) in item.value" :key="indexs"
								@click.stop="CXClick(items)">
								<view class="li-views-s-left">{{items.name}}</view>
								<view class="li-views-s-rig">{{items.num}}条</view>
							</view>
						</view>
					</view>
				</u-dropdown-item>
				<u-dropdown-item :title="wsTitle" :options="options1">
					<view class="colour-v">
						<view class="colour-l">
							<view class="colour-l-h">外观</view>
							<view class="colour-l-view">
								<view class="colour-l-viewl" v-for="(item,index) in WGlist" :key="index"
									:class="{se:appearance_id == item.id}" @click="wgClick(item)">
									<view class="colour-l-viewl-txt">{{item.name}}</view>
									<view class="colour-l-viewl-num">- {{item.num}} -</view>
								</view>
							</view>
						</view>
						<view class="colour-l">
							<view class="colour-l-h">内饰</view>
							<view class="colour-l-view">
								<view class="colour-l-viewl" v-for="(item,index) in NSlist" :key="index"
									:class="{se:interior_id == item.id}" @click="NSClick(item)">
									<view class="colour-l-viewl-txt">{{item.name}}</view>
									<view class="colour-l-viewl-num">- {{item.num}} -</view>
								</view>

							</view>
						</view>
						<view class="colour-btm">
							<view class="colour-btm-cz" @click="WGChongZhi">重置</view>
							<view class="colour-btm-ck" @click="WGChakan">查看{{totol}}车源</view>
						</view>
					</view>
				</u-dropdown-item>
				<u-dropdown-item :title="sheng_name" :options="options1">
					<view class="city-v">
						<view class="city-v-left">
							<view class="city-v-left-l" :class="{Citycss:ShengSstate == index}"
								v-for="(item,index) in cityList" :key="index" @click="ShengClick(item,index)">
								{{item.name}}</view>
						</view>
						<view class="city-v-rig">
							<view class="city-v-rig-l" :class="{Citycss:ShiSstate == index}"
								v-for="(item,index) in ShiList" :key="index" @click="ShiClick(item,index)">
								<view class="city-v-rig-l-left">{{item.name}}</view>
								<view class="city-v-rig-l-rig">{{item.num}}条</view>
							</view>
						</view>
					</view>
				</u-dropdown-item>
				<u-dropdown-item title="筛选" :options="options1">
					<view class="seach-v">
						<view class="seach-v-one">价格区间(万元)</view>
						<view class="seach-v-two" v-if="SXState" style="position: relative; z-index: 9999999; width: 100%;">
							<slippery v-if="showDro" :option="[0,10,20,30,40,50,60,70,80,'不限']" @change="change" style="width: 100%;"/></slippery>
						</view>
						<view class="seach-v-san">车源类型</view>
						<view class="seach-v-si">
							<view class="seach-v-si-l" :class="{seachlse:source_status == ''}" @click="CYCLick('')">全部
							</view>
							<view class="seach-v-si-l" :class="{seachlse:source_status == '1'}" @click="CYCLick('1')">现车
							</view>
							<view class="seach-v-si-l" :class="{seachlse:source_status == '2'}" @click="CYCLick('2')">期货
							</view>
						</view>
						<view class="seach-v-san">商家类型</view>
						<view class="seach-v-si">
							<view class="seach-v-si-l" :class="{seachlse:identity == ''}" @click="SJCLick('')">全部</view>
							<view class="seach-v-si-l" :class="{seachlse:identity == '1'}" @click="SJCLick('1')">公司
							</view>
							<view class="seach-v-si-l" :class="{seachlse:identity == '2'}" @click="SJCLick('2')">个人
							</view>
						</view>
						<view class="seach-v-wu">
							<view class="seach-v-wu-cz" @click="SXCZClick">重置</view>
							<view class="seach-v-wu-qd" @click="SXQDClick">确定</view>
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<view style="padding: 0 30rpx 30rpx 30rpx;">
			<view class="eng-l" v-for="(item,index) in carsVehicleModelsListList" :key="index" v-if="carsVehicleModelsListList.length>0" @click="detailCar(item)">
				<view class="eng-l-H">{{item.cars_name}} <image v-if="item.picture == 1" src="/static/picture.png" mode=""></image> </view>
				<view class="eng-l-head">{{item.source_type_source_name}} {{item.appearance_interior}} {{item.location_name}}</view>
				<view class="eng-l-bottom" v-if="item.guide_price">
					<view class="eng-l-bottom-left-z">指导价:{{item.guide_price}}万/{{item.quotation_name}}</view>
					<view class="eng-l-bottom-left-o"> <text>{{item.remarks_name ? item.remarks_name : '售价'}}</text> :{{item.price}} <text v-if="item.price>0">万</text> </view>
				</view>
				<view class="eng-uers">
					<view class="users_name">
						<view>{{item.users_name}} <text v-if="item.city">（{{item.city}}）</text> </view>
						<image :src="item.icon_url" mode="heightFix"></image>
					</view>
					<view class="eng-l-bottom-rig">{{item.create_time}}</view>
				</view>
			</view>
			<view class="nodata" v-if="carsVehicleModelsListList.length == 0">
				<image src="/static/nodata.png" mode=""></image>
			</view>
		</view>
		<view style="padding: 60rpx;">
			<!-- <slippery :option="[0,10,20,30,40,50,60,70,80,'不限']" @change="change"/></slippery> -->
		</view>
	</view>

</template>

<script>
	import cuCustom from "@/components/custom-nav/cu-custom.vue";
	import addressSearchFixed from "@/components/addressSearch/addressSearchFixed.vue";

	import {
		carsVehicleModelsList, //车源车型
		carsVehicleModelCondition, //车型条件
		carsVehicleModelColour, //外观
		carsVehicleModelCity, //城市
		getCardList,
		getCardModel
	} from '@/api/card.js'
	import slippery from "@/pages/components/slippery.vue";
	export default {
		components: {
			cuCustom,
			addressSearchFixed,
			slippery,	//双向滑动
		},
		data() {
			return {
				Name:"",
				SXState:true,	//双向
				ccState:'9999',	//车状态
				droTitle: '全部车型',
				wsTitle:'外观/内饰',
				WGstatus: 1, // 外观
				NSstatus: 1, //内饰
				city_id: 1, //地址
				ShengSstate: '', //省地址状态
				ShiSstate: '', //市区
				ShiList: [], //市list
				carsVehicleModelConditionList: {}, //车型列表
				WGlist: [], //外观
				NSlist: [], //内饰
				carsVehicleModelsListList: [], //列表
				value1: 1,
				value2: 2,
				totol:'',	//总条数
				sheng_name: '全部地区', //省名称


				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				CState: false, //车
				CityState: false, //地区
				WGState: false, //外观
				status: '1',
				customNavTitleIndex: 1, // 页面标题下标
				pageBackgroundColor: '#F7F8FA', // 页面背景颜色
				sreachContent: '', //寻车列表中搜索框的功能
				arrList: [],
				typeList: [],
				appearance_id: '', //外观颜色
				interior_id: '', //内饰颜色



				model_two_id: '', //内饰颜色
				appearance_name: '', //外观颜色名称
				interior_name: '', //内饰颜色名称
				city_id: '', //省或市id
				start_price: '', //价格区间起
				end_price: '', //价格区间止
				source_status: '', //1：现车 2：期货
				identity: '', //商家类型 1：个人 2：企业
				page_num: 10,
				page: 1,

				search:'',
				cityList: [],

			showDro:false
			}
		},
		onShow() {
			const value = uni.getStorageSync('newEnergName');
			this.Name = value
			try {
				this.$refs.setAddres.setAddres()
			} catch (e) {

			}

		},
		onReachBottom(){
			this.page_num += 1 
			this.getpage() //车源车型
		},
		onHide() {
			this.$utils.movePage()
		},
		onUnload() {
			this.$utils.movePage()
		},
		onLoad(opt) {
			this.search = opt.searchName || ''
			this.series_two_id = opt.id || ''
			this.getpage() //车源车型
			this.carsVehicleModelCondition() //车型条件
			this.carsVehicleModelColourPage() //车辆外观
			this.carsVehicleModelCity() //城市
		},
		methods: {
			// 跳转到详情页面
			detailCar: function (data) {
				console.log('详情===', data);
				uni.navigateTo({
					url: "/pages/home/newCar/newCarDetail/newCarDetail?id=" + data.id
				})
			},
			openDro(){
				console.log("111");
				this.showDro=true
			},
			change(e){
				console.log(e,'123')
				// this.model_two_id = e[0] + '0'
				
				// if(e[1] == 0||e[1] == 10){
				// 	this.end_price = 999999999
				// }else{
				// 	this.end_price = e[1] + '0'
				// }
				console.log(this.end_price)
			},
			// 列表
			getpage() {
				let data = {
					series_two_id: this.series_two_id,
					model_two_id: this.model_two_id, //车型id
					appearance_name: this.appearance_name, //外观颜色名称
					interior_name: this.interior_name, //内饰颜色名称
					city_id: this.city_id, //省或市id
					start_price: this.model_two_id, //价格区间起
					end_price: this.end_price, //价格区间止
					source_status: this.source_status, //1：现车 2：期货
					identity: this.identity, //identity
					page_num: this.page_num, //identity
					search:this.search,
					page: this.page,
				}
				carsVehicleModelsList(data).then(res => {
					// console.log(res,'列表')
					this.carsVehicleModelsListList = res.data.data
					this.totol = res.data.total
				})
			},
			// 筛选重置
			SXCZClick() {
				this.source_status = ''
				this.identity = ''
				
				this.$refs.uDropdown.close();
				this.SXState = false
				this.model_two_id = ''
				this.end_price = ''
				
				this.getpage()
				setTimeout(() => {
					this.SXState = true
				}, 100)
				
			},
			// 筛选确定
			SXQDClick() {
				this.getpage()
				this.$refs.uDropdown.close();
			},
			// 车源
			CYCLick(e) {
				console.log(e)
				this.source_status = e
			},
			// 商家类型
			SJCLick(e) {
				this.identity = e
			},
			// 车型
			carsVehicleModelCondition() {
				let data = {
					series_two_id: this.series_two_id,
					search: this.search
				}
				carsVehicleModelCondition(data).then(res => {
					console.log(res, '车型')
					this.carsVehicleModelConditionList = res.data
				})
			},
			// 车型确定
			CXClick(e) {
				this.droTitle = e.name
				this.model_two_id = e.id
				this.ccState = e.id
				this.$refs.uDropdown.close();
				this.getpage()
			},
			// 全部车型
			QBCXClick(item) {
				this.droTitle=item;
				this.model_two_id = ''
				this.ccState = '9999'
				this.$refs.uDropdown.close();
				this.getpage()
			},
			// 外观选择
			wgClick(e) {
				this.appearance_id = e.id
				this.interior_name = e.id
				this.wsTitle=e.name
				this.carsVehicleModelColourPage()
				this.getpage() //车源车型
			},
			// 内饰选择
			NSClick(e) {
				this.interior_id = e.id
				this.appearance_name = e.id
				this.carsVehicleModelColourPage()
				this.getpage() //车源车型
			},
			// 颜色
			carsVehicleModelColourPage() {
				let data = {
					search: this.search,
					series_two_id: this.series_two_id,
					appearance_id: this.appearance_id, //外观颜色id 
					interior_id: this.interior_id //内饰颜色id （只能传一个）
				}
				carsVehicleModelColour(data).then(res => {
					console.log(res, '颜色')
					this.WGlist = res.data.appearance
					this.NSlist = res.data.interior
				})
			},
			// 颜色重置
			WGChongZhi() {
				this.appearance_id = ''
				this.interior_id = ''
				this.appearance_name = ''
				this.interior_name = ''
				this.carsVehicleModelColourPage()
				this.getpage()
				this.$refs.uDropdown.close();
			},
			// 颜色查看
			WGChakan() {
				this.$refs.uDropdown.close();
				this.getpage()
			},
			// 城市
			carsVehicleModelCity() {
				// console.log(this.cityList)
				// this.ShiList = this.cityList[0].children
				// cityList
				// children
				carsVehicleModelCity({
					search: this.search,
					series_two_id: this.series_two_id,
				}).then(res => {
					console.log(res.data, '城市')
					this.cityList = res.data
				})
			},
			// 点击省
			ShengClick(item, index) {
				console.log(item, index)
				this.ShengSstate = index
				this.ShiList = this.cityList[index].children
				this.city_id = item.id
				this.sheng_name = item.name

				this.ShiSstate = ''
				this.getpage() //车源车型
			},
			// 点击市区
			ShiClick(item, index) {
				console.log(item, index)
				this.ShiSstate = index
				this.city_id = item.id
				this.sheng_name = item.name
				this.getpage() //车源车型
				this.$refs.uDropdown.close();
			},
			// async getCardModel() {
			// 	const res = await getCardModel(this.reqParams.series_two_id)
			// 	if (res.code == 0) {
			// 		this.typeList = res.data.value
			// 		console.log(res.data.value);
			// 	}
			// },
			// async getCardList() {
			// 	const res = await getCardList(this.reqParams)
			// 	if (res.code == 0) {
			// 		// console.log(res.data);
			// 		this.arrList = res.data
			// 	}
			// },
			// 外观
			pear() {
				this.WGState = !this.WGState
			},
			// 地区
			City() {
				this.CityState = !this.CityState
			},
			// 车型
			Che() {
				this.CState = !this.CState
			},
			// 点击——新车
			event_clickNewCarTitle() {
				this.$utils.log("新车")
				this.currentTitle = '新车'
			},
			// 点击——寻车
			event_clickSeachCarTitle() {
				this.$utils.log("寻车")
				this.currentTitle = '寻车'
			},
			// 点击——搜索框搜索按钮
			event_clickSearchBtn(content) {
				console.log(content,'contentcontent')
				this.search = content
				console.log(this.search,'contentcontent')
				this.sreachContent = content
				this.getpage()
				this.$utils.log("点击搜索" + content)
				if (this.customNavTitleIndex == 2) {
					const loaction = uni.getStorageSync('address')
				} else {
					const loaction = uni.getStorageSync('address')
				}
			},
		}
	}
</script>

<style lang="scss">
	.nodata{
		display: flex;
		justify-content: center;
		image {
		  margin-top: 260rpx;
		}
	}
	page {
			background: #F7F8FA;
		}
	
		.li-ab-l-left {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}
	
		.li-ab-l-rig {
			font-size: 24rpx;
			font-family: PingFangSCRegular;
			font-weight: 400;
			color: #999999;
		}
	
		.li-ab-l {
			padding: 30rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
		}
	
		.li-ab {
			position: absolute;
			top: 260rpx;
			left: 0rpx;
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0px 18px 20px -18px #888889;
		}
	

	
		.eng-l-bottom-left-z {
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	
		.eng-l-bottom-left-o {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #EC4B4B;
		}
	
		.eng-l-bottom-left {
			display: flex;
		}
	
		.eng-l-bottom {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
		}
		.eng-uers{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 20rpx;
			font-weight: 500;
			font-family: PingFang SC;
			margin-top: 15rpx;
			.users_name{
				display: flex;
				align-items: center;
				image{
					height: 30rpx;
					max-width: 100rpx;
					margin-left: 20rpx;
				}
			}
			.eng-l-bottom-rig {
				color: #999999;
			}
		}
		.eng-l-tt-l {}
	
		.eng-l-tt {
			display: flex;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			padding-top: 18rpx;
		}
	
		.eng-l-head {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			padding-top: 20rpx;
		}
	
		.eng-l-H {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #000000;
			image{
				margin-left: 20rpx;
				width: 28rpx;
				height: 24rpx;
			}
		}
	
		.eng-l {
			padding: 30rpx 20rpx;
			background: #FFFFFF;
			border-radius: 14rpx;
			margin-bottom: 20rpx;
		}
	
		.se {
	
			height: 27rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			/* color: #2D56C5; */
			text-align: center;
		}
	
		.li {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
	
			display: flex;
	
		}
	
		.li-txt {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			padding-top: 5rpx;
			padding-right: 10rpx;
		}
	
		.li-img {
			width: 16rpx;
			height: 10rpx;
		}
	
		.li-img image {
			width: 100%;
			height: 100%;
		}
	
		.newCar-page {
			display: flex;
			flex-direction: column;
			width: 100%;
			height: auto;
		}
	
		.newCar-page .newCar-page__content {
			height: 100vh;
			/* 父元素设置相对定位 */
			position: relative;
			/* background-color: #F7F8FA; */
			background-color: #F7F8FA;
			padding: 26rpx 28rpx 0 28rpx;
		}
	
		/* 车系列表 */
		.carSeries-list {
			display: flex;
		}
	
		.carSeries-list__left {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	
		.carSeries-list__right {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
	
			margin-left: 14rpx;
		}
	
		/* 车系卡片 */
		.carSeries-card {
			border-radius: 10px;
			background-color: #FFFFFF;
			width: 100%;
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
	
		.carSeries-card__text {
			display: flex;
			flex-direction: column;
			margin-left: 30rpx;
		}
	
		.carSeries-card__text .title {
			font-family: Source Han Sans CN;
			font-weight: bold;
			font-size: 14px;
			text-align: left;
		}
	
		.carSeries-card__text .desc {
			margin-top: 5px;
			text-align: left;
			font: Alimama ShuHeiTi;
			font-size: 12px;
			color: #666666;
		}
	
		.carSeries-card__image {
			width: 58rpx;
			height: 50rpx;
			margin: 39rpx 50rpx 39rpx auto;
		}
	
		/* 常用车品牌列表 */
		.carCommonBrand-list {
			text-align: left;
			background-color: #FFFFFF;
			/* margin: 0px 14px 0px 14px; */
			border-radius: 10px;
			padding: 28rpx;
		}
	
		.carCommonBrand-list__title-background {
			width: 75px;
			background: url(@/static/bac-small.png);
			background-size: 100% 100%;
		}
	
		.carCommonBrand-list__title {
			width: 140rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #000026;
			opacity: 1;
			margin-left: 2rpx;
		}
	
		.carCommonBrand-list__content {
			display: flex;
			justify-content: center;
			padding: 37rpx 0 9rpx 0;
		}
	
		/* 车品牌 */
		.carBrand {
			flex: 1;
			width: 140rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	
		.carBrand__image {
			height: 56rpx;
			width: 56rpx;
		}
	
		.carBrand__name {
			margin-top: 28rpx;
	
			font-size: 28rpx;
			font-weight: bold;
		}
	
		/* 车品牌索引列表 */
		.newCar-indexed-list__title-wrapper {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 6px 0px 4px 14px;
		}
	
		.newCar-indexed-list__title {
			font-size: 28rpx;
			font-family: DIN Alternate;
			font-weight: bold;
			color: #1C2125;
			opacity: 1;
		}
	
		.newCar-indexed-list__menu {
			display: flex;
			position: fixed;
	
			top: 50%;
			right: 0;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(0, -50%);
	
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	
		.nav-title {
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			line-height: 0rpx;
			color: #FFFFFF;
			opacity: 1;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}
	
		.nav-title-selected {
			font-family: Alimama ShuHeiTi;
			font-weight: bold;
		}
	
		.content-row {
			display: flex;
			flex-direction: row;
			align-items: center;
		}
	
	
		.pad18-14 {
			padding: 18rpx 28rpx;
		}
	
		.pad6-14-4 {
			padding: 6px 0px 4px 14px;
		}
	
		.iamge-class {
			width: 100rpx;
			height: 52rpx;
		}
	
		.marginLeft5 {
			margin-left: 5px;
		}
	
		.brand-name-class {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #000026;
			opacity: 1;
		}
	
		.right-view-text {
			font-size: 20rpx;
			font-family: DIN Alternate;
			font-weight: bold;
			color: #999999;
			padding: 4rpx;
		}
	
		.right-view-text-select {
			font-size: 20rpx;
			font-family: DIN Alternate;
			font-weight: bold;
			color: #0E59EA;
			padding: 4rpx;
		}
		.li-view{
			background: #FFFFFF;
		}
		.li-view-top{
			padding: 20rpx 28rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content:space-between;
		}
		.li-view-top-left{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			
		}
		.li-view-top-rig{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			
		}
		.li-views{
			
		}
		.li-views-h{
			padding: 20rpx 28rpx;
			background: #F4F4F4;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}
		.li-views-s{
			padding: 30rpx 28rpx;
			border-bottom: 1rpx solid #F2F2F2;
			display: flex;
			flex-wrap: nowrap;
			justify-content:space-between;
		}
		.li-views-s-left{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			
		}
		.li-views-s-rig{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			
		}
		.colour-v{
			padding: 20rpx 28rpx;
			background: #FFFFFF;
		}
		.colour-l{
			
		}
		.colour-l-h{
			width: 59rpx;
			height: 29rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #000000;
		}
		.colour-l-view{
			display: flex;
			flex-wrap: wrap;
			padding-top: 30rpx;
		}
		.colour-l-viewl{
			width: 160rpx;
			height: 80rpx;
			background: #F7F8FA;
			border-radius: 40rpx;
			text-align: center;
			margin-right: 15rpx;
			margin-bottom: 20rpx;
		}
		.colour-l-viewl-txt{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			
			padding-top: 7rpx;
		}
		.colour-l-viewl-num{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			
		}
		.se{
			background: #0E59EA;
			
	color: #FFFFFF;
		}
		.colour-btm{
			margin-top: 70rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content:space-between;
		}
		.colour-btm-cz{
			width: 274rpx;
			height: 80rpx;
			background: #F2F2F2;
			border-radius: 14rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000
		}
		.colour-btm-ck{
			width: 400rpx;
			height: 80rpx;
			background: #0E59EA;
			line-height: 80rpx;
			text-align: center;
			border-radius: 14rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		
		.city-v{
			background: #FFFFFF;
			height: 950rpx;
			display: flex;
		}
		.city-v-left{
			width: 25%;
			height: 950rpx;
			overflow: scroll;
		}
		.city-v-rig{
			width:75%;overflow: scroll;
			box-shadow: 5px 5px 20px -2px #888889; 
		}
		.city-v-left-l{
			padding: 30rpx 28rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}
		.Citycss{
			padding: 30rpx 28rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			background: #0E59EA;
			color: #FFFFFF;
		}
		.city-v-rig-l{
			padding: 30rpx 28rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content:space-between;
		}
		.city-v-rig-l-left{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}
		.city-v-rig-l-rig{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			
		}
		.seach-v{
			padding: 20rpx 27rpx;
			background: #FFFFFF;
		}
		.seach-v-one{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}
		.seach-v-san{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			margin-top: 50rpx;
		}
		.seach-v-si{
			display: flex;
			flex-wrap: wrap;
		}
		.seach-v-si-l{
			width: 180rpx;
			height: 60rpx;
			background: #F7F8FA;
			border-radius: 30rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			margin-right: 30rpx;
			margin-top: 30rpx;
		}
		.seach-v-wu{
			display: flex;
			flex-wrap: nowrap;
			justify-content:space-between;
			margin-top: 60rpx;
		}
		.seach-v-wu-cz{
			width: 274rpx;
			height: 80rpx;
			background: #F2F2F2;
			border-radius: 14rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			text-align: center;
			line-height: 80rpx;
		}
		.seach-v-wu-qd{
			width: 400rpx;
			height: 80rpx;
			background: #0E59EA;
			border-radius: 14rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}
		.seachlse{
			background: #0E59EA;
			color: #FFFFFF;
		}

	/deep/ .u-dropdown__menu__item__text {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 150rpx;
	}
</style>